import React from 'react'
import { connect } from 'dva'
import moment from 'moment'

import * as Constant from '../../constant'
import Title from '../../components/Title'
import AddressItem from '../../components/AddressItem'
import OrderListItem from '../../components/OrderListItem'

import './style.css'

class Index extends React.Component {

    getOrder = () => {
        const { order, match } = this.props
        return order.map[match.params.id] || {}
    }

    cleanOrder = () => {
        this.doDispatch('order/cleanOrder')
    }

    pay = () => {
        this.doDispatch('order/pay')
    }

    doDispatch = (type) => {
        let order = this.getOrder()
        const { dispatch } = this.props
        dispatch({
            type,
            payload: order
        })
    }

    renderDetail = () => {
        let order = this.getOrder()
        return (
            <>
                <ul className='orderInfo-details'>
                    <li>
                        <span>商品总价</span>
                        <span>¥: {order.money}</span>
                    </li>
                    <li>
                        <span>运费</span>
                        <span>¥: 00.00</span>
                    </li>
                    <li>
                        <span></span>
                        <span className='money-wrap'>
                            <span>共2件, 实付款</span>
                            <span className='money'>¥: {order.money}</span>
                        </span>
                    </li>
                </ul>
                <ul className='orderInfo-details'>
                    <li>
                        <span>订单编号</span>
                        <span>{order.orderNum}</span>
                    </li>
                    <li>
                        <span>下单时间</span>
                        <span>{moment(order.date).format('YYYY/MM/DD')}</span>
                    </li>
                </ul>
            </>
        )
    }

    renderBtns = () => {
        let order = this.getOrder()
        // 1. 订单已经创建, 未支付
        if (order.status === Constant.ORDER_STATUS.ORDER_STATUS_CREATEAT) {
            return (
                <div className='orderInfo-pay' >
                    <button className='btn'  onClick={this.cleanOrder} >取消订单</button>
                    <button className='btn' onClick={this.pay} >付款</button>
                </div>
            )
        }
        // 2. 订单未创建
        if (order.status === Constant.ORDER_STATUS.ORDER_STATUS_REDAY) {
            return (
                <div className='orderInfo-pay' >
                    <button className='btn' onClick={this.pay} >付款</button>
                </div>
            )
        }
    }

    render() {
        let order = this.getOrder()
        console.log('orderinfo ', order)
        return (
            <div className='orderInfo' >
                <Title title='订单详情' />
                <div className='orderInfo-status'>
                    {Constant.ORDER_STATUS_TEXT[order.status]}
                </div>
                {
                    order.address && (
                        <AddressItem 
                            data={order.address}
                        />
                    )
                }
                <OrderListItem  order={order} />
                {this.renderDetail()}
                {this.renderBtns()}
            </div>
        )
    }
}

const mapState = state => ({
    order: state.order
})

export default connect(mapState)(Index)
